<template>
  <div class="box">
    <div class="top">
      <van-icon name="arrow-left" class="icon" @click="backRoute" />
      <div class="logo"><b>SENSER</b><span>识季</span></div>
      <div></div>
    </div>
    <div class="li">
        <listComponent v-for="item in listValue" :data="item"  :jump="jumpRouter"></listComponent>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getGoodList } from "./api";
import listComponent from "../../components/listComponents.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const backRoute = () => {
  router.back();
};
const listValue = ref<any>([]);
const getGoods = async () => {
  let res = await getGoodList();
  console.log(res, "res");
  listValue.value = res.data;
  console.log(listValue.value, "valsu");
};
const jumpRouter = (id:any) => {
  router.push({
    path: '/topic/',
    query: {
      good_id:id
    }
  })
}
onMounted(() => {
  getGoods();
});
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.li {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  color: black;
}
.top {
  display: flex;
  justify-content: space-between;
}
.title {
  display: flex;
  width: 100%;
  overflow: auto;
}
</style>
